<template>
  <div class="createBusiness">
    <!--        头部-->
    <div class="resetTitle">
      <div @click="$router.back()" class="imgs">
        <span class="iconfont icon-fanhui"></span>
      </div>
      <div class="resetText">创建商家</div>
    </div>
    <div style="width: 100%;height: 50px;"></div>
    <div class="editorCon">
      <van-form validate-first @failed="onFailed" @submit="onSubmit(form)">
        <!--                &lt;!&ndash; 通过 pattern 进行正则校验 &ndash;&gt;-->

        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">店铺名称</p>
            <van-field
                v-model="form.shopName"
                name="shopName"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写店铺名称' }]"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">店铺网址</p>
            <van-field
                v-model="form.shopUrl"
                name="shopUrl"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写店铺网址' }]"
            />
          </div>
        </div>
        <!-- 通过 validator 进行异步函数校验 -->
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">店铺来源</p>
            <van-field
                v-model="form.shopResource"
                name="shopResource"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写店铺来源' }]"
            />
          </div>
        </div>


        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">合作方式</p>
            <div class="ipt">
              <select class="select" v-model="form.cooperateMode">
                <option disabled>请选择</option>
                <option :value="item.itemValue" v-for="(item ,index ) in cooperateMode">{{ item.itemText }}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">商家真实姓名</p>
            <van-field
                v-model="form.shopRealName"
                name="shopRealName"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写商家真实姓名' }]"

            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">商家电话</p>
            <van-field
                v-model="form.shopPhone"
                name="shopPhone"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写商家电话' }]"

            />
          </div>
        </div>

        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">商家微信</p>
            <van-field
                v-model="form.shopWeixin"
                name="shopWeixin"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写商家微信' }]"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">商家qq</p>
            <van-field
                v-model="form.shopQq"
                name="shopQq"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写商家QQ' }]"
            />
          </div>
        </div>
        <div class="formItem">
          <div class="formItemBg">
            <p class="nameTitle">掌柜名（旺旺号）</p>
            <van-field
                v-model="form.shopAccount"
                name="shopAccount"
                placeholder="请输入"
                :rules="[{required: true, message: '请填写掌柜名（旺旺号）' }]"
            />
          </div>
        </div>


        <div class="sub" >
          <van-button round block type="info" native-type="submit">{{form.id == ''?'添加':'修改'}}</van-button>
        </div>
      </van-form>

    </div>
  </div>
</template>

<script>
import comApi from '@/api/comapi'
import {rules} from '@/utils/common'
import shopApi from '@/api/shop'
import {Toast} from "vant";

export default {
  name: "createBusiness",
  components: {},
  data() {
    return {
      form: {
        id: '',
        "cooperateMode": "1",
        "shopAccount": "",
        "shopName": "",
        "shopPhone": "",
        "shopQq": "",
        "shopRealName": "",
        "shopResource": "",
        "shopUrl": "",
        "shopWeixin": ""
      },
      cooperateMode: [],
      numFlag: true,
      rules: rules,

    }
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.numFlag = false
      this.getById()
    }
    this.cooperateModeLoad()
  },
  methods: {
    getById() {
      let params = {id: this.form.id }
      shopApi.detail(params).then(res => {
        this.form = res.data.record
      })
    },
    onFailed(errorInfo) {
      console.log('failed提交表单不通过触发', errorInfo);
    },
    cooperateModeLoad() {
      comApi.getDictList('cooperate_mode').then(res => {
        this.cooperateMode = res.data.records
      })
    },

    onSubmit(form) {
      console.log(form)
      if (form.id == '') {
        shopApi.insert(form).then(res => {
          Toast(res.message)
          this.$router.back()
        })
      }else{
        shopApi.update(form).then(res=>{
          Toast(res.message)
          this.$router.back()
        })
      }
    },
  },

}
</script>

<style lang="less" scoped>
.createBusiness {
  width: 100%;
  min-height: 100%;
  background: #f8f8f8;
}

.resetTitle {
  width: 100%;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  background: #f8f8f8;
  z-index: 10001;

  .imgs {
    position: absolute;
    left: 10px;
    top: 13px;

    span {
      font-size: 25px;
    }
  }

  .resetText {
    width: 100%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
  }
}

.editorCon {
  width: 100%;
  background: #ffffff;
  font-size: 14px;

  ul {
    li {
      border-bottom: 1px solid #e8e8e8;

      .editorConLis {
        padding: 10px;
        display: flex;
        align-items: center;

        .nameTitle {
          width: 100px;
          color: #949ba2;
          line-height: 30px;
        }

        .ipt {
          flex: 1;

          input {
            width: 100%;
            height: 30px;

          }
        }

      }

      .selectWork {
        .ipt {
          .select {
            height: 30px;
            width: 100%;
            border: 0;
            background: #ffffff;
          }
        }
      }
    }
  }

  .formItem {
    width: 100%;
    border-bottom: 1px solid #e8e8e8;

    .nameTitle {
      width: 100px;
      /*color: #949ba2;*/
      line-height: 30px;
    }

    .formItemBg {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      padding: 10px;
      line-height: 30px;

      /deep/ .van-field {
        flex: 1;
      }

      .ipt {
        flex: 1;
        padding-left: 20px;

        .select {
          width: 100%;
          height: 30px;
          border: none;

          option {
            height: 30px;
          }
        }
      }

      /deep/ .van-cell {
        padding: 0px;

        input {
          text-indent: 20px;
          height: 30px;
        }
      }

    }

  }

  .sub {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding-bottom: 10px;
    /deep/.van-button--info{
      color: black;
    }
    .van-button {
      width: 95%;
      margin: 0 auto;
      background: #f8f5be;
      border: none;
    }
  }
}

.resetBut {
  width: 100%;
  background: white;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: 10px;

  .button {
    color: white;
    margin: 0 auto;
    width: 90%;
    border-radius: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f8f5be;
  }

}
</style>
